<template>
  <div class="register-container">
    <el-card class="register-card">
      <h2 style="text-align: center; margin-bottom: 30px;">注册大麦网账号</h2>
      
      <el-form 
        :model="registerForm" 
        :rules="registerRules" 
        ref="registerFormRef"
      >
        <el-form-item prop="username">
          <el-input 
            v-model="registerForm.username" 
            placeholder="请输入用户名" 
            size="large"
          >
            <template #prefix>
              <el-icon><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        
        <el-form-item prop="email">
          <el-input 
            v-model="registerForm.email" 
            placeholder="请输入邮箱" 
            size="large"
          >
            <template #prefix>
              <el-icon><Message /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        
        <el-form-item prop="phone">
          <el-input 
            v-model="registerForm.phone" 
            placeholder="请输入手机号" 
            size="large"
            maxlength="11"
          >
            <template #prefix>
              <el-icon><Iphone /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        

        
        <el-form-item prop="password">
          <el-input 
            v-model="registerForm.password" 
            type="password" 
            placeholder="请输入密码" 
            size="large"
            show-password
          >
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        
        <el-form-item prop="confirmPassword">
          <el-input 
            v-model="registerForm.confirmPassword" 
            type="password" 
            placeholder="请确认密码" 
            size="large"
            show-password
          >
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        
        <el-form-item>
          <el-checkbox v-model="agreeTerms" class="terms-checkbox">
            我已阅读并同意 <a href="#" @click.prevent="showTermsDialog = true">《用户协议》</a>和<a href="#" @click.prevent="showPrivacyDialog = true">《隐私政策》</a>
          </el-checkbox>
        </el-form-item>
        
        <el-form-item>
          <el-button 
            type="primary" 
            size="large" 
            style="width: 100%;" 
            @click="handleRegister"
            :loading="loading"
          >
            {{ loading ? '注册中...' : '注册' }}
          </el-button>
        </el-form-item>
      </el-form>
      
      <p style="text-align: center; color: #666; margin-top: 20px;">
        已有账号？<el-button type="text" @click="$router.push('/login')">立即登录</el-button>
      </p>
    </el-card>
    
    <!-- 用户协议对话框 -->
    <el-dialog v-model="showTermsDialog" title="用户协议" width="600px">
      <div class="dialog-content">
        <h3>用户协议内容</h3>
        <p>1. 服务条款的确认和接纳</p>
        <p>2. 用户注册</p>
        <p>3. 用户账号、密码和安全性</p>
        <p>4. 用户行为</p>
        <p>5. 知识产权声明</p>
        <p>6. 隐私保护</p>
        <p>7. 免责声明</p>
        <p>8. 服务变更、中断或终止</p>
        <p>9. 法律适用和争议解决</p>
        <p>10. 其他规定</p>
      </div>
    </el-dialog>
    
    <!-- 隐私政策对话框 -->
    <el-dialog v-model="showPrivacyDialog" title="隐私政策" width="600px">
      <div class="dialog-content">
        <h3>隐私政策内容</h3>
        <p>1. 我们收集的信息</p>
        <p>2. 我们如何使用收集的信息</p>
        <p>3. 我们如何保护您的信息</p>
        <p>4. 信息共享与披露</p>
        <p>5. Cookie和类似技术的使用</p>
        <p>6. 您的权利</p>
        <p>7. 未成年人保护</p>
        <p>8. 隐私政策的更新</p>
        <p>9. 联系我们</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { User, Iphone, Message, Lock } from '@element-plus/icons-vue'
import api from '../api'

export default {
  name: 'Register',
  components: {
    User,
    Iphone,
    Message,
    Lock
  },
  setup() {
    const router = useRouter()
    const registerFormRef = ref()
    const loading = ref(false)

    const agreeTerms = ref(false)
    const showTermsDialog = ref(false)
    const showPrivacyDialog = ref(false)

    // 注册表单
    const registerForm = ref({
      username: '',
      email: '',
      phone: '',
      password: '',
      confirmPassword: ''
    })

    // 验证规则
    const registerRules = {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 20, message: '用户名长度在3到20个字符之间', trigger: 'blur' },
        { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名只能包含字母、数字和下划线', trigger: 'blur' }
      ],
      email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
      ],
      phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
      ],
  
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
      ],
      confirmPassword: [
        { required: true, message: '请确认密码', trigger: 'blur' },
        {
          validator: (rule, value, callback) => {
            if (value !== registerForm.value.password) {
              callback(new Error('两次输入的密码不一致'))
            } else {
              callback()
            }
          },
          trigger: 'blur'
        }
      ]
    }



    // 处理注册
    const handleRegister = () => {
      registerFormRef.value.validate((valid) => {
        if (valid) {
          if (!agreeTerms.value) {
            ElMessage.warning('请阅读并同意用户协议和隐私政策')
            return
          }
          
          loading.value = true
          
          // 调用注册API
          api.post('/auth/register', {
            username: registerForm.value.username,
            email: registerForm.value.email,
            phone: registerForm.value.phone,

            password: registerForm.value.password
          })
            .then(response => {
              ElMessage.success('注册成功！即将跳转到登录页面')
              
              setTimeout(() => {
                router.push('/login')
              }, 1500)
            })
            .catch(error => {
              // 正确处理Laravel验证错误响应格式
              let errorMessage = '注册失败，请稍后重试';
              if (error.response?.status === 422) {
                // 处理验证码错误
                if (error.response.data?.errors?.message) {
                  errorMessage = error.response.data.errors.message[0];
                } else if (error.response.data?.message) {
                  errorMessage = error.response.data.message;
                }
              }
              ElMessage.error(errorMessage);
            })
            .finally(() => {
              loading.value = false
            })
        }
      })
    }

    return {
      registerForm,
      registerRules,
      registerFormRef,
      loading,

      agreeTerms,
      showTermsDialog,
      showPrivacyDialog,

      handleRegister
    }
  }
}
</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.register-card {
  width: 420px;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.code-input {
  display: flex;
  gap: 10px;
}

.code-btn {
  white-space: nowrap;
}
</style>